<template>
	<view class="change-phone-number">
		<view class="title">
			<text>当前绑定手机号：{{userInfo.mobile}}</text>
		</view>
		<view class="rel-name-input">
			<u--input placeholder="请输入新手机号" border="none" shape="circle" class="inpt" v-model="phoneValue"></u--input>
		</view>
		<view class="u-demo-block__content" style="margin-top: 15px;">
			<u-input placeholder="请输入验证码" shape="circle" class="input-code" v-model="code">
			<!-- #ifdef APP-NVUE -->
			<u--input placeholder="请输入验证码" shape="circle" class="input-code" v-model="code">
			<!-- #endif -->
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="20" changeText="60秒重新获取"></u-code>
					<u-button @tap="getCode" :text="tips" size="mini" border="none" class="code-button"></u-button>
				</template>
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
			</u-input>
		</view>
		<u-button text="确认更换" shape="circle" color=" #4ABC5A" class="start-button" @click="sure"></u-button>
		<view class="note">
			实名前仅可更换一次，实名后不可更换
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getMsgCode,
		PhoneChange
	} from "@/api/user.js"
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				tips: '获取验证码',
				value: '',
				phoneValue: '',
				code: ''
			}
		},
		watch: {
			value(newValue, oldValue) {}
		},
		computed: {
			...mapState({
				userInfo: (state) => state.userInfo,
			})
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (!uni.$u.test.mobile(this.phoneValue)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					try {
						await getMsgCode({
							"account": this.phoneValue,
							"sendType": "mobile"
						})
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					} catch (e) {
						uni.hideLoading();
						uni.showToast({
							title: e.data || e.message,
							icon: 'none'
						})
						console.log(e)
					}

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			showToast() {
				uni.$u.toast('更换成功');
				uni.$u.toast('验证码输入错误');
			},
			// 点击确认按钮调更新接口
			async sure() {
				try {
					const res = await PhoneChange({
						code: this.code,
						mobile: this.phoneValue
					});
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				} catch (e) {
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
					console.log(e)
				}

			}
		}
	}
</script>
<style lang="scss" scoped>
	.change-phone-number {
		padding: 0 40rpx;

		.title {
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			margin-top: 60rpx;
		}

		.rel-name-input {
			.inpt {
				background-color: #F7F7F7;
				height: 90rpx;
			}

			.inpt:first-child {
				margin: 71rpx 0 30rpx;
			}
		}

		.u-demo-block__content {
			.input-code {
				height: 90rpx;
				background-color: #F7F7F7;
				border: none;
				padding: 0 14rpx !important;
			}

			::v-deep .input-placeholder {
				font-size: 28rpx;
			}

			.code-button {
				background-color: #F7F7F7;
				border: none;
				color: #4ABC5A;

			}
		}

		.start-button {
			margin: 60rpx 0 40rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

		.note {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			text-align: center;
		}


		::v-deep .uni-input-input {
			padding-left: 20px;
		}
	}

	::v-deep .input-placeholder {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #B3B4B5;
		padding-left: 40rpx;
	}
</style>
